<template>
  <div class="yy-warehouse-permissions-manage">
    <!--列表-->
    <div class="yy-goods-manage-list" v-show="type=='list'">
      <Card>
        <p slot="title">
          <Icon type="md-list" />
          角色权限列表
        </p>
        <Form type="primary" ref="formInline" :model="searchForm"  inline>
          <FormItem prop="user">
            <Input type="text" v-model="searchForm.itemNum" placeholder="请输入角色名称"></Input>
          </FormItem>         
            <FormItem>
              <Button type="primary" @click="handleSearch()">查询</Button>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleAdd()">新增</Button>
            </FormItem>
        </Form>
        <Divider> 角色权限 </Divider>
        <div class="qrcode-list" align="center">
          <ul>
            <li class="qrcode-list-li" v-for="(item,index) in data" :key="index">
              <Card class="card">
                <p slot="title">
                    <Icon type="ios-book-outline" />
                    班长
                </p>
                <ul class="qrcode-list-card-up">
                  <li><label>仓库权限：</label>
                    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange" style="margin-left:50px; margin-top:10px">
                        <li><Checkbox label="1">水电仓库</Checkbox></li>
                        <li><Checkbox label="2">水电班仓库</Checkbox></li>
                        <li><Checkbox label="3">医疗气体库</Checkbox></li>
                    </CheckboxGroup>
                  </li>
                </ul>
                <div class="qrcode-list-card-down">
                  <Form inline>
                    <FormItem>
                      <Button type="primary" @click="close(index)">修改权限</Button>
                    </FormItem>
                  </Form>
                </div>
              </Card>
            </li>
          </ul>
        </div>
        <!--<Table :columns="columns" :data="data" ></Table>-->
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
              <Page :total="page.total" :page-size="page.pageSize" :current="1" @on-change="changePage" show-total></Page>
          </div>
        </div>
      </Card>
    </div>
    <!--详情-->
    <div class="yy-goods-manage-details" v-show="type=='details'">
       <Card>
        <p slot="title">
          <Icon type="md-paper"/>
          查看详情
        </p>
        <p slot="extra">
          <Button type="primary" @click="goBack()">返回</Button>
        </p>
        <div class="details">
          <p class="details-title"><span>物品编号:</span>{{currentData.itemNum}}</p>
          <p class="details-title"><span>物品名称:</span>{{currentData.itemName}}</p>
          <p class="details-title"><span>预警下限:</span>{{currentData.minNum}}</p>
          <p class="details-title"><span>预警上限:</span>{{currentData.maxNum}}</p>
          <p class="details-title"><span>单位:</span>{{currentData.unitName}}</p>
          <p class="details-title"><span>是否耐用:</span>{{currentData.isSpare}}</p>
          <p class="details-title"><span>是否返修件:</span>{{currentData.isFX}}</p>
          <p class="details-title"><span>分类名称:</span>{{currentData.cateName}}</p>
          <p class="details-title"><span>规格:</span>{{currentData.size}}</p>
          <p class="details-title"><span>主要供货商:</span>{{currentData.cusName}}</p>
          <p class="details-title"><span>备注:</span>{{currentData.remark}}</p>
        </div>
      </Card>
    </div>
    <!--添加/编辑-->
    <div class="yy-goods-manage-add-edit"  v-show="(type=='add' || type=='edit')">
      <Card>
        <p slot="title">
          <template v-if="type=='add'"> 
            <Icon type="md-create"/> 新增
          </template>
          <template v-if="type=='edit'"> 
            <Icon type="md-document"/>编辑
          </template>
        </p>
        <p slot="extra" >
          <Button type="primary" @click="goBack()">返回</Button>
        </p>
        <div class="editForm">
          <Form ref="editForm" :model="editFormInLine" :rules="editFormRuleInline" :label-width="100" @keydown.native.enter.prevent ="handleSubmit">
            <FormItem label="物品编号"  prop="itemNum">
              <Input v-model="editFormInLine.itemNum" placeholder="请输入物品编号"  :disabled="type=='edit'? true:false"></Input>
            </FormItem>
            <FormItem label="物品名称" prop="itemName">
              <Input v-model="editFormInLine.itemName" placeholder="请输入物品名称" :disabled="type=='edit'? true:false"></Input>
            </FormItem>   
            <FormItem label="分类名称" prop="cateNum" placeholder="请选择分类名称" >
            <Select class="select" v-model="editFormInLine.cateNum"  placeholder="请选择分类名称" :disabled="type=='edit'? true:false">
              <Option v-for="(dataSt,index) in dataCateName" :value="dataSt.cateNum" :key="index" :label="dataSt.cateName">
                {{dataSt.cateName}}
              </Option>
            </Select>
            </FormItem>      
            <FormItem label="预警下限" prop="minNum">
              <InputNumber v-model="editFormInLine.minNum" min=0 placeholder="预警下限"></InputNumber>
            </FormItem>
            <FormItem label="预警上限" prop="maxNum">
              <InputNumber v-model="editFormInLine.maxNum" min=0 placeholder="预警上限"></InputNumber>
            </FormItem>
            <FormItem label="单位" prop="unitName">
              <Input v-model="editFormInLine.unitName" placeholder="单位"></Input>
            </FormItem>
            <FormItem label="是否耐用" prop="isSpare">
            <Select class="select" v-model="editFormInLine.isSpare" placeholder="是否耐用">
              <Option :value=0>否</Option>
              <Option :value=1>是</Option>
            </Select>
            </FormItem>
            <FormItem label="是否返修件" prop="isFX">
            <Select class="select" v-model="editFormInLine.isFX" placeholder="是否返修件">
              <Option :value=0>否</Option>
              <Option :value=1>是</Option>
            </Select>
            </FormItem>
            <FormItem label="规格" prop="size">
              <Input v-model="editFormInLine.size" placeholder="规格"></Input>
            </FormItem>
            <FormItem label="主要供货商" prop="cusName">
              <Input v-model="editFormInLine.cusName" placeholder="主要供货商"></Input>
            </FormItem>
            <FormItem label="备注" prop="remark">
              <Input v-model="editFormInLine.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="备注" maxlength="50"></Input>
            </FormItem>
            <FormItem>
              <Button @click="handleSubmit" type="primary" class="button">提交</Button>
              <Button @click="handleReset" type="primary" class="button">重置</Button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import API from "./api";
import ValidatorRule from "@/filters/validator-rule";
import { formatNetTime } from "@/libs/tools";
import i18n from "./locale";

export default {
  name: "yy-warehouse-permissions-manage",
  data() {
    return {
      i18n: i18n,
      currentData: "",
      detailsModal: false,
      type: "list",
      dataCateName: [],
      page: {
        total: 0,
        pageSize: 20
      },
      searchForm: {
        itemNum: "",
        itemName: "",
        cateName: "",
        userID: "",
        userName: "",
        b_UserRole: ""
      },
      editFormInLine: {
        cateNum: "",
        cateName: "",
        itemNum: "",
        itemName: "",
        itemBarCode: "",
        minNum: "",
        maxNum: "",
        unitName: "",
        isSpare: 0,
        isFX: 0,
        size: "",
        color: "",
        cusName: "",
        description: "",
        remark: "",
        userID: "",
        userName: "",
        b_UserRole: "",
        brand: ""
      },
      editFormRuleInline: {
        itemNum: ValidatorRule.require,
        itemName: ValidatorRule.require,
        cateNum: ValidatorRule.select
      },
      columns: [
        {
          title: "物品编码",
          key: "itemNum"
        },
        {
          title: "物品名称",
          key: "itemName"
        },
        {
          title: "预警下限 ",
          key: "minNum"
        },
        {
          title: "预警上限 ",
          key: "maxNum"
        },
        {
          title: "单位 ",
          key: "unitName"
        },
        {
          title: "是否耐用 ",
          key: "isSpare",
          render: (h, params) => {
            return h("span", params.row.isSpare == 0 ? "否" : "是");
          }
        },
        {
          title: "是否返修件 ",
          key: "isFX",
          render: (h, params) => {
            return h("span", params.row.isFX == 0 ? "否" : "是");
          }
        },
        {
          title: "分类名称",
          key: "cateName"
        },
        {
          title: "规格",
          key: "size"
        },
        {
          title: "主要供货商",
          key: "cusName"
        },
        {
          title: "备注",
          key: "remark"
        },
        {
          title: "操作",
          key: "action",
          width: 180,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.details(params.index);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.index);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.delete(params.index, params.row.id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data: []
    };
  },

  mounted() {
    this.userInfo = this.$store.state.user.userInfo;
    this.getCateList();
    this.handleSearch();
  },

  computed: {},

  methods: {
    getCateList() {
      let obj = {
        cateNum: "",
        cateName: "",
        cateRemark: "",
        pageNum: 1,
        pageSize: 20
      };
      this.getCateNameList(obj);
    },

    getCateNameList(obj) {
      API.getCateNameList(obj)
        .then(res => {
          if (res.code == 200) {
            let dataCate = res.data;
            this.dataCateName = dataCate.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    handleSearch(index, id) {
      let obj = this.searchForm;
      obj.pageNum = 1;
      obj.pageSize = this.page.pageSize;
      this.searchForm = obj;
      this.getList(obj);
    },

    changePage(pageNum) {
      let obj = this.searchForm,
        maxPageNum = Math.ceil(this.page.total / this.page.pageSize);
      if (obj.pageNum > maxPageNum) {
        obj.pageNum = maxPageNum;
      } else {
        obj.pageNum = pageNum;
      }
      this.searchForm = obj;
      this.getList(obj);
    },

    getList(obj) {
      API.getList(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            if (data != null) {
              this.page.total = data.total;
              this.page.pageSize = data.pageSize;
              this.data = data.list;
            } else {
              this.$Message.success({ content: "暂无数据！" });
              this.data = [];
            }
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    goBack() {
      this.type = "list";
    },

    handleAdd() {
      this.type = "add";
      this.handleReset();
    },

    details(index) {
      this.type = "details";
      this.currentData = _.clone(this.data[index]);
      if (this.currentData.isSpare == 0) {
        this.currentData.isSpare = "否";
      } else {
        this.currentData.isSpare = "是";
      }
      if (this.currentData.isFX == 0) {
        this.currentData.isFX = "否";
      } else {
        this.currentData.isFX = "是";
      }
    },

    edit(index) {
      this.type = "edit";
      this.handleReset();
      this.currentData = this.data[index];
      //this.editFormInLine.cateNum = this.currentData.cateNum;
      this.editFormInLine = _.clone(this.currentData);
    },

    delete(index, id) {
      let tthis = this;
      this.$Modal.confirm({
        title: "提示：",
        content: "你确定删除这条记录",
        onOk: function() {
          let obj = {
            ItemNum: tthis.data[index].itemNum,
            ItemName: tthis.data[index].itemName,
            userID: tthis.userInfo.userId,
            userName: tthis.userInfo.userName,
            b_UserRole: ""
          };
          API.delete(obj)
            .then(res => {
              if (res.code == 200) {
                this.$Message.success({ content: "该记录已经删除成功！" });
                tthis.data.splice(index, 1);
                tthis.resetList();
              }
            })
            .catch(err => {
              console.log(err);
              this.$Message.error("请求异常！");
            });
        }
      });
    },

    resetList() {
      //求余为1，页码为最大页码，请求页需减1
      let maxPageNum = Math.ceil(this.page.total / this.page.pageSize);
      let remainderNum = this.page.total % this.page.pageSize;
      if (
        this.searchForm.pageNum == maxPageNum &&
        remainderNum == 1 &&
        this.searchForm.pageNum !== 1
      ) {
        this.searchForm.pageNum = this.searchForm.pageNum - 1;
      }
      let obj = this.searchForm;
      this.getList(obj);
    },

    handleSubmit() {
      //console.log(384, this.editFormInLine);
      this.$refs.editForm.validate(valid => {
        if (valid) {
          if (this.type == "edit") {
            this.editSubmit(this.editFormInLine);
          } else {
            this.addSubmit(this.editFormInLine);
          }
        }
      });
    },

    handleReset() {
      this.$refs.editForm.resetFields();
      if (this.type == "edit") {
        this.editFormInLine.itemNum = this.currentData.itemNum;
        this.editFormInLine.itemName = this.currentData.itemName;
        this.editFormInLine.cateNum = this.currentData.cateNum;
      }
    },

    editSubmit(obj) {
      this.searchForm.cateNum = obj.cateNum;
      obj.userID = this.userInfo.userId;
      //obj.id = this.currentData.id;
      API.editSubmit(obj)
        .then(res => {
          if (res.code == 200) {
            this.resetList();
            this.$Message.success("修改成功！");
            this.goBack();
          }
        })
        .catch(err => {
          this.$Message.error("修改异常！");
        });
    },

    addSubmit(obj) {
      obj.userID = this.userInfo.userId;
      API.addSubmit(obj)
        .then(res => {
          if (res.code == 200) {
            this.handleSearch();
            this.$Message.success("添加成功！");
            this.goBack();
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    }
  }
};
</script>
<style lang="less" >
@import "./yy-warehouse-permissions-manage.less";
</style>
